<script type="text/javascript">
    activateMenuTimesheet();
    activateSubMenuView();

    {% if error_msg %}
    displayError({{ error_msg }})
    {% endif %}

    function setTotalHours() {
        totalHours = 0;
        $(".in-invoice p:nth-child(3)").each(function() {
            totalHours = totalHours + Number($(this).html());
        })
        $("#total-hours").html(totalHours);
    }
</script>

<div id="timesheet">
    <div id="timesheet-header-data">
        <div style="float:right; margin-right:10px;">
            <a href="/timesheet/pdf/{{ selected_id }}/">
                <img src="/static/img/pdf-download.png" width="43" height="49" alt="PDF"/>
            </a>
        </div>
        <div style="float: left;">
            <div class="field-line">
                <div class="label">Month</div>
                <div class="value">
                    <select id="month-selection">
                        {% for id,timesheet_name in availableTimesheets.items %}
                            {% if id == selected_id %}
                                <option value="{{ id }}" selected="selected">{{ timesheet_name }}</option>
                            {% else %}
                                <option value="{{ id }}">{{ timesheet_name }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="field-line">
                <div class="label-value">
                    <div class="label">Consultant</div>
                    <div class="value">{{ consultant }}</div>
                </div>
            </div>
            <div class="field-line">
                <div class="label-value">
                    {% if customer %}
                    <div class="label">Customer</div>
                    <div class="value">{{ customer }}</div>
                    {% else %}
                    <div class="label">Contract</div>
                    <div class="value">{{ contract }}</div>
                    {% endif %}
                </div>
            </div>
            <div class="field-line">
                <div class="label-value">
                    <div class="label">Project</div>
                    <div class="value">{{ project }}</div>
                </div>
            </div>
            <div class="field-line">
                <div class="label-value">
                    <div class="label">Project Manager</div>
                    <div class="value">{{ manager }}</div>
                </div>
            </div>
        </div>
        {% if contract %}
        <div style="float:right; margin-right:10px;">
            <a id="edit">
                <img src="/static/img/edit.png" width="48" height="48" alt="edit"/>
            </a>
        </div>
        {% endif %}
    </div>

    <div id="timesheet-days">
        {% for day in days %}
            {% if day.part_of_invoice %}
                {% if day.weekday == 'saturday' %}
                    <div class="day in-invoice saturday">
                {% endif %}
                {% if day.weekday == 'sunday' %}
                    <div class="day in-invoice sunday">
                {% endif %}
                {% if day.weekday != 'saturday' and day.weekday != 'sunday' %}
                    {% if day.holiday %}
                        <div class="day in-invoice holiday">
                    {% else %}
                        <div class="day in-invoice">
                    {% endif %}
                {% endif %}
            {% else %}
                <div class="day out-of-invoice">
            {% endif %}
        <p>{{ day.date }}</p>
        <p>
            {% if day.part_of_invoice %}
                <p>{{ day.worked_hours }}</p>
            {% else %}
                <p>&nbsp;</p>
            {% endif %}
        </p>
        </div>
        {% endfor %}
    </div>

</div>


<div id="hours-count">
    <p>Total Hours</p>
    <p id="total-hours">Not Set</p>
</div>

<script type="text/javascript">
    $("#edit").click(function() {
        changeContent("/timesheet/edit/{{ selected_id }}/");
    });

    $("#month-selection").change(function() {
        changeContent("/timesheet/view/" + $("select option:selected").val() + "/");
    });
    
    setTotalHours();
</script>